import React, { Component } from 'react'

function Home(props) {
    return (
        <div>
            Home -- {props.name}
        </div>
    )
}

function Detail(props) {
    return (
        <div>
            Detail -- {props.name}
        </div>
    )
}

function Hoc(Wrap) {
    return class extends Component {

        componentDidMount() {
            console.log("抽取公共的逻辑到生命周期函数");
        }

        render() {
            return (
                <Wrap {...this.props}></Wrap>
            )
        }
    }
}

const HocHome = Hoc(Home);
const HocDetail = Hoc(Detail);

export default class App extends Component {
  render() {
    return (
      <>
        <HocHome name = "home"></HocHome>
        <HocDetail name = "detail"></HocDetail>
      </>
    )
  }
}
